<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>全部新闻数据</span>
          <el-button class="button" @click="pqnews" v-hasPermiss="'pq'" color="purple"
            >爬取新闻</el-button
          >
          <div v-hasPermiss="'search'" style="display: flex">
            <el-input v-model="input" placeholder="请输入搜索内容" />
            <el-button class="button" @click="search" type="warning" :loading="loading"
              >搜索</el-button
            >
          </div>
        </div>
      </template>
      <el-scrollbar height="620px">
        <el-table :data="newsList" style="width: 100%" height="620px">
          <el-table-column :show-overflow-tooltip="true" fixed prop="_id" label="ID" width="150" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="title"
            label="新闻标题"
            width="120"
          />
          <el-table-column prop="cover" label="新闻封面" width="120">
            <template #default="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
                :initial-index="0"
                preview-teleported
              >
                <template #error>
                  <div class="nopic">暂无图片</div>
                </template></el-image
              >
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="origin"
            label="新闻来源"
            width="120"
          />
          <el-table-column :show-overflow-tooltip="true" prop="cate" label="新闻分类" width="120" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="contenthtml"
            label="新闻内容"
            width="600"
          />
          <el-table-column :show-overflow-tooltip="true" fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button @click="goDetail(scope.row)" type="primary">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
    <el-pagination
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { getNewsList, getSearchData, getNews } from "@/api/news"
import { storeToRefs } from "pinia"
import { useNewsStore } from "@/stores/newsinfo"
const { newsinfo } = storeToRefs(useNewsStore())
const router = useRouter()
const loading = ref(false)
const goDetail = (item: any) => {
  newsinfo.value = item
  router.push("/newsmanagement")
}
const pqnews = async () => {
  getNews("/admin/getNewsData").then((res: any) => {
    if (res.code == 200) {
      ElNotification({
        title: "温馨提示",
        message: res.msg,
        type: "success",
      })
    }
  })
}
const input = ref("")
const handleSizeChange = (val: number) => {
  pageSize.value = val
  init(pageNumber.value, pageSize.value)
}
const total = ref(0)
const pageNumber = ref<number>(1)
const pageSize = ref<number>(10)
const newsList = ref([])
const search = () => {
  if (!input.value) {
    return init()
  }
  loading.value = true
  getSearchData("/news/getSearchData", {
    iptvalue: input.value,
    limit: true,
  })
    .then((res) => {
      if (res.data.length != 0) {
        ElMessage.success(`查找成功，共${res.data.length}条数据`)
        total.value = res.data.length
        newsList.value = res.data
        input.value = ""
      } else {
        ElMessage.error(`查无此信息`)
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const init = (pagenum: number = 1, pagesize: number = 10) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0)",
  })
  getNewsList("/user/getAllNewsList", {
    pageSize: pagesize,
    pageNumber: pagenum,
  })
    .then((res) => {
      total.value = res.data.total
      newsList.value = res.data.list
    })
    .finally(() => {
      loading.close()
    })
}
init(pageNumber.value, pageSize.value)
const handleCurrentChange = (val: number) => {
  pageNumber.value = val
  init(pageNumber.value, pageSize.value)
}
</script>

<style lang="scss" scoped>
:deep(.el-table__body),
:deep(.el-table__header) {
  table-layout: fixed !important;
  width: 100% !important;
}
//  {
//   // table-layout: fixed !important;
//   width: 100% !important;
// }
.nopic {
  width: 100px;
  height: 100px;
  background-color: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  padding: 8px 15px !important;
  box-sizing: border-box;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 99%;
}
</style>
